آموزش In-Depth Vue 3 برای مبتدیان (Inc. Composition API، روتر) [ویدئو]

سرفصل ها و درس ها

آشنایی با Vue Getting to Know Vue

• معرفی Introduction

• آنچه شما برای این دوره نیاز دارید What You will Need for this Course

• Vue.js چیست و چه کاری می تواند انجام دهد؟ What is Vue.js and What can it Do?

• مروری بر تغییرات Vue 3 Overview of Vue 3 Changes

• کد منبع پروژه Project Source Code

ابتدا به Vue.js نگاه کنید First Look at Vue.js

• بخش مقدمه Section Introduction

• نمونه Vue The Vue Instance

• داده ها و فهرست ها Data and Lists

• حلقه زدن با اشیاء Looping with Objects

• فهرست شاخص ها و کلیدها List Indexes and Keys

• صفات الزام آور Binding Attributes

• مینی چالش-پیوندهای پویا Mini Challenge-Dynamic Links

• چالش کوچک-پیوندهای پویا-راه حل Mini Challenge-Dynamic Links-Solution

• عبارات جاوا اسکریپت JavaScript Expressions

• مدیریت رویداد Event Handling

• مواد و روش ها Methods

• HTML خام Raw HTML

• چرخه زندگی Vue The Vue Life Cycle

مبانی کامپوننت Component Basics

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• کامپوننت ها چیست؟ What are Components?

• کامپوننت ها چیست؟ What are Components?

• ابتدا به کامپوننت ها نگاه کنید First Look at Components

• ابتدا به کامپوننت ها نگاه کنید First Look at Components

• لوازم و استفاده مجدد از قطعات Props and Reusing Components

• لوازم و استفاده مجدد از قطعات Props and Reusing Components

• اجزای محلی Local Components

• اجزای محلی Local Components

ابزارهای ساخت و برنامه های کاربردی تک صفحه ای Build Tools and Single-Page Applications

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• برنامه های کاربردی تک صفحه ای Single-Page Applications

• برنامه های کاربردی تک صفحه ای Single-Page Applications

• Vue CLI The Vue CLI

• Vue CLI The Vue CLI

• ساختار پروژه Project Structure

• ساختار پروژه Project Structure

• افزونه vetur The vetur Extension

• افزونه vetur The vetur Extension

ابزارهای ساخت و برنامه های کاربردی تک صفحه ای Build Tools and Single-Page Applications

پروژه شمارش معکوس Countdown Project

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• دانلود پروژه شروع کننده Starter Project Download

• دانلود پروژه شروع کننده Starter Project Download

• اجزای فایل منفرد Single File Components

• اجزای فایل منفرد Single File Components

• پویا کردن اجزای ما Making Our Components Dynamic

• پویا کردن اجزای ما Making Our Components Dynamic

• محاسبه روزهای باقی مانده Calculating Days Left

• محاسبه روزهای باقی مانده Calculating Days Left

• رندر مشروط Conditional Rendering

• رندر مشروط Conditional Rendering

• بیشتر در مورد رندر شرطی More on Conditional Rendering

• بیشتر در مورد رندر شرطی More on Conditional Rendering

• ویژگی های محاسبه شده Computed Properties

• ویژگی های محاسبه شده Computed Properties

• ناظران Watchers

• ناظران Watchers

• محاسبه شده یا ناظران Computed or Watchers

• محاسبه شده یا ناظران Computed or Watchers

• سفارش و تغییر رویدادهای گذشته Ordering and Toggling Past Events

• سفارش و تغییر رویدادهای گذشته Ordering and Toggling Past Events

• تله پورت Teleport

• تله پورت Teleport

پروژه شمارش معکوس Countdown Project

فرم ها، رویدادها و اصلاح کننده ها Forms, Events, and Modifiers

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• جزء فرم ما Our Form Component

• جزء فرم ما Our Form Component

• یک ظاهر طراحی و تعیین موقعیت فرم مدال Styling and Positioning the Form Modal

• یک ظاهر طراحی و تعیین موقعیت فرم مدال Styling and Positioning the Form Modal

• رویدادهای سفارشی را منتشر کنید Emit Custom Events

• رویدادهای سفارشی را منتشر کنید Emit Custom Events

• ورودی های فرم صحافی Binding Form Inputs

• ورودی های فرم صحافی Binding Form Inputs

• انتشار داده با یک رویداد سفارشی Emit Data with a Custom Event

• انتشار داده با یک رویداد سفارشی Emit Data with a Custom Event

• انتشار رویدادهای متعدد Emit Multiple Events

• انتشار رویدادهای متعدد Emit Multiple Events

• اصلاح کننده ها Modifiers

• اصلاح کننده ها Modifiers

• اعتبار بخشیدن به فرم ما Validating Our Form

• اعتبار بخشیدن به فرم ما Validating Our Form

• به روز رسانی رویدادها Updating Events

• به روز رسانی رویدادها Updating Events

• حذف رویدادها Removing Events

• حذف رویدادها Removing Events

فرم ها، رویدادها و اصلاح کننده ها Forms, Events, and Modifiers

اعتبار سنجی و نگاهی عمیق تر به Props Validation and a Deeper Look at Props

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• اعتبار سنجی پایه Prop Validation

• اعتبار سنجی پایه Prop Validation

• ویژگی های غیر مناسب Non-Prop Attributes

• ویژگی های غیر مناسب Non-Prop Attributes

• بیشتر در مورد ویژگی های غیر مناسب More on Non-Prop Attributes

• بیشتر در مورد ویژگی های غیر مناسب More on Non-Prop Attributes

اعتبار سنجی و نگاهی عمیق تر به Props Validation and a Deeper Look at Props

اسلات ها و اجزای پویا Slots and Dynamic Components

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• آنچه را که خواهیم ساخت What We will be Building

• آنچه را که خواهیم ساخت What We will be Building

• صفحات و اجزای پروژه Project Pages and Components

• صفحات و اجزای پروژه Project Pages and Components

• مقدمه ای بر اسلات ها Introduction to Slots

• مقدمه ای بر اسلات ها Introduction to Slots

• نمای کلی ساختار صفحه Overview Page Structure

• نمای کلی ساختار صفحه Overview Page Structure

• اسلات در عمل Slots in Practice

• اسلات در عمل Slots in Practice

• عبور داده های پویا و محدوده Passing Dynamic Data and Scope

• عبور داده های پویا و محدوده Passing Dynamic Data and Scope

• محتوای بازگشتی Fallback Content

• محتوای بازگشتی Fallback Content

• اسلات به نام Named Slots

• اسلات به نام Named Slots

• اسلات های محدوده Scoped Slots

• اسلات های محدوده Scoped Slots

• صفحه سفارشات Orders Page

• صفحه سفارشات Orders Page

• صفحه پرفروش ها Bestsellers Page

• صفحه پرفروش ها Bestsellers Page

• اجزای دینامیک Dynamic Components

• اجزای دینامیک Dynamic Components

اسلات ها و اجزای پویا Slots and Dynamic Components

ارائه/تزریق Provide/Inject

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• ارائه- تزریق چیست What is provide-inject

• ارائه- تزریق چیست What is provide-inject

• راه اندازی یک ارائه دهنده Setting Up a Provider

• راه اندازی یک ارائه دهنده Setting Up a Provider

• تزریق داده ها Injecting Data

• تزریق داده ها Injecting Data

• چالش کوچک - سفارشات به روز رسانی - صفحات پرفروش Mini Challenge - Update Orders - Bestsellers Pages

• چالش کوچک - سفارشات به روز رسانی - صفحات پرفروش Mini Challenge - Update Orders - Bestsellers Pages

• به روز رسانی سفارشات و پرفروش ترین صفحات برای استفاده ارائه Update Orders and Bestsellers Pages to Use Provide

• به روز رسانی سفارشات و پرفروش ترین صفحات برای استفاده ارائه Update Orders and Bestsellers Pages to Use Provide

• به روز رسانی ارائه دهنده از یک مؤلفه کودک Updating the Provider from a Child Component

• به روز رسانی ارائه دهنده از یک مؤلفه کودک Updating the Provider from a Child Component

ارائه/تزریق Provide/Inject

مقدمه ای بر مسیریابی Introduction to Routing

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• آنچه را که خواهیم ساخت و آغازگر پروژه خواهیم بود What We will be Building and Project Starter

• آنچه را که خواهیم ساخت و آغازگر پروژه خواهیم بود What We will be Building and Project Starter

• راه اندازی روتر Vue Setting Up the Vue Router

• راه اندازی روتر Vue Setting Up the Vue Router

• پیوند روتر و نمای روتر Router Link and Router View

• پیوند روتر و نمای روتر Router Link and Router View

• پارامترها و پرس و جوها Params and Queries

• پارامترها و پرس و جوها Params and Queries

• تطبیق مسیرهای پویا Matching Dynamic Routes

• تطبیق مسیرهای پویا Matching Dynamic Routes

• مسیرهای تو در تو Nested Routes

• مسیرهای تو در تو Nested Routes

• کلاس های فعال Active Classes

• کلاس های فعال Active Classes

• صفحات بازگشتی Fallback Pages

• صفحات بازگشتی Fallback Pages

• راه اندازی اجزای پروژه و مسیرها Setting Up Our Project Components and Routes

• راه اندازی اجزای پروژه و مسیرها Setting Up Our Project Components and Routes

• ناوبری برنامه ای Programmatic Navigation

• ناوبری برنامه ای Programmatic Navigation

• حالت های مختلف روتر Different Router Modes

• حالت های مختلف روتر Different Router Modes

مقدمه ای بر مسیریابی Introduction to Routing

Composition API Composition API

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• Composition API چیست؟ What is the Composition API

• Composition API چیست؟ What is the Composition API

• تنظیم ترکیب Composition Setup

• تنظیم ترکیب Composition Setup

• بدوی در مقابل انواع مرجع Primitive Versus Reference Types

• بدوی در مقابل انواع مرجع Primitive Versus Reference Types

• معرفی سریع پروکسی ها Quick Introduction to Proxies

• معرفی سریع پروکسی ها Quick Introduction to Proxies

• استفاده از Reactive و isReactive Using Reactive and isReactive

• استفاده از Reactive و isReactive Using Reactive and isReactive

• افزودن واکنش پذیری با Ref Adding Reactivity with Ref

• افزودن واکنش پذیری با Ref Adding Reactivity with Ref

• تخریب و toRefs Destructuring and toRefs

• تخریب و toRefs Destructuring and toRefs

• فقط خواندنی Readonly

• فقط خواندنی Readonly

• محاسبه شده است Computed

• محاسبه شده است Computed

• توابع ترکیب مستقل Standalone Composition Functions

• توابع ترکیب مستقل Standalone Composition Functions

• چالش کوچک-حرکت روی کارت ها بر اساس دسته Mini Challenge-Moving Over the Cards by Category

• چالش کوچک-حرکت روی کارت ها بر اساس دسته Mini Challenge-Moving Over the Cards by Category

• حرکت بر روی کارت ها بر اساس دسته Moving Over the Cards by Category

• حرکت بر روی کارت ها بر اساس دسته Moving Over the Cards by Category

• دسترسی به روتر Accessing the Router

• دسترسی به روتر Accessing the Router

• Watch و Watch Effect Watch and WatchEffect

• Watch و Watch Effect Watch and WatchEffect

• استفاده از Alongside API Options Using Alongside the Options API

• استفاده از Alongside API Options Using Alongside the Options API

Composition API Composition API

ادامه پروژه ما Pushing On with Our Project

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• پیوند به کارت انتخابی و دسته بندی استایلینگ Linking to Selected Card and Category Styling

• پیوند به کارت انتخابی و دسته بندی استایلینگ Linking to Selected Card and Category Styling

• نمای ایجاد The Create View

• نمای ایجاد The Create View

• بازیابی کارت انتخاب شده Retrieving the Selected Card

• بازیابی کارت انتخاب شده Retrieving the Selected Card

• انتخاب صفحه فعلی Selecting the Current Page

• انتخاب صفحه فعلی Selecting the Current Page

• تغییر صفحات کارت Switching Card Pages

• تغییر صفحات کارت Switching Card Pages

• مؤلفه پیش نمایش کارت The Card Preview Component

• مؤلفه پیش نمایش کارت The Card Preview Component

• مولفه خروجی متن Text Output Component

• مولفه خروجی متن Text Output Component

• جزء ویرایش کارت Card Edit Component

• جزء ویرایش کارت Card Edit Component

• مولفه ورودی متن و منوی شناور Text Input Component and Hover Menu

• مولفه ورودی متن و منوی شناور Text Input Component and Hover Menu

• افزودن گزینه های منو Adding Menu Options

• افزودن گزینه های منو Adding Menu Options

• گزینه های منو ادامه دارد Menu Options Continued

• گزینه های منو ادامه دارد Menu Options Continued

• یک ظاهر طراحی شده منو Menu Styling

• یک ظاهر طراحی شده منو Menu Styling

• به روز رسانی کارت Updating the Card

• به روز رسانی کارت Updating the Card

• افزودن بخش های جدید Adding New Sections

• افزودن بخش های جدید Adding New Sections

• حذف بخش ها Removing Sections

• حذف بخش ها Removing Sections

• تنظیم مجدد ترتیب بخش ها Rearranging the Order of Sections

• تنظیم مجدد ترتیب بخش ها Rearranging the Order of Sections

• تغییر ارتفاع بخش Changing the Section Height

• تغییر ارتفاع بخش Changing the Section Height

• یک ظاهر طراحی اضافی Additional Styling

• یک ظاهر طراحی اضافی Additional Styling

• ارائه و تزریق با ترکیب Provide and Inject with Composition

• ارائه و تزریق با ترکیب Provide and Inject with Composition

ادامه پروژه ما Pushing On with Our Project

گاردهای ناوبری و بارگذاری تنبل Navigation Guards and Lazy Loading

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• گاردهای ناوبری Navigation Guards

• گاردهای ناوبری Navigation Guards

• مسیرهای بارگذاری تنبل Lazy Loading Routes

• مسیرهای بارگذاری تنبل Lazy Loading Routes

• گروه بندی مسیرها به تکه ها Grouping Routes into Chunks

• گروه بندی مسیرها به تکه ها Grouping Routes into Chunks

گاردهای ناوبری و بارگذاری تنبل Navigation Guards and Lazy Loading

آپلود تصاویر Uploading Images

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• کامپوننت آپلود تصویر Image Upload Component

• کامپوننت آپلود تصویر Image Upload Component

• راه اندازی کلودیناری Setting Up Cloudinary

• راه اندازی کلودیناری Setting Up Cloudinary

• خواندن اشیاء فایل و پیش نمایش Reading File Objects and Previewing

• خواندن اشیاء فایل و پیش نمایش Reading File Objects and Previewing

• در حال آپلود فایل تصویری Uploading the Image File

• در حال آپلود فایل تصویری Uploading the Image File

• ذخیره URL تصویر در کارت ما Saving the Image URL to Our Card

• ذخیره URL تصویر در کارت ما Saving the Image URL to Our Card

• تغییر موقعیت تصویر Repositioning the Image

• تغییر موقعیت تصویر Repositioning the Image

• حذف تصاویر Removing Images

• حذف تصاویر Removing Images

آپلود تصاویر Uploading Images

گسترش Deployment

• استقرار در Netlify Deployment to Netlify

• استقرار در Netlify Deployment to Netlify

• متشکرم Thank You

• متشکرم Thank You

گسترش Deployment